import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import RatioCustom from '../../examples/Ratio/Custom';
import RatioDefault from '../../examples/Ratio/Default';
import RatioExample from '../../examples/Ratio/Example';

import styles from '../../css/examples.module.scss';

# Ratios

<p className="lead">
  Use generated pseudo elements to make an element maintain the aspect ratio of
  your choosing. Perfect for responsively handling video or slideshow embeds
  based on the width of the parent.
</p>

## About

Use the ratio helper to manage the aspect ratios of external content like
`<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on
any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied from
the parent .ratio class directly to the child.

You don't need to include `frameborder="0"` in your `iframe`s.

## Example

<ReactPlayground codeText={RatioExample} />

## Aspect ratios

Aspect ratios can be customized using `aspectRatio`. By default the following `aspectRatio`
values are provided:

<ReactPlayground
  codeText={RatioDefault}
  exampleClassName={styles.ratioExamples}
/>

## Custom

Create custom aspect ratios by passing a number to `aspectRatio` instead of using the above 
pre-defined values. You can use either a fraction or percentage to define the custom ratio.

<ReactPlayground
  codeText={RatioCustom}
  exampleClassName={styles.ratioExamples}
/>

## API

<ComponentApi metadata={props.data.Ratio} />

export const query = graphql`
  query RatioQuery {
    Ratio: componentMetadata(displayName: { eq: "Ratio" }) {
      ...ComponentApi_metadata
    }
  }
`;
